<template>
    <transition-group class="loading" tag="div">
        <div class="loading-box" v-if="show">
            <div class="loading-box-item" key="load">
            </div>
        </div>
    </transition-group>
</template>
<script setup>
import { ref, defineExpose } from 'vue';

const show = ref(true)
const open = ({ duration = 3 }) => {
    show.value = true
    const timer = setTimeout(() => {
        clearTimeout(timer)
        show.value = false
    }, duration * 1000)
}


defineExpose({
    open
})
</script>

<style scoped>
.loading {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.loading-box {
    padding: 0.8rem 2.2rem;
    border-radius: 0.5rem;
    background: #5c5b5b;
}

.loading-box-item {
    width: 2rem;
    height: 2rem;
    border: 4px solid #5c5b5b;
    border-radius: 50%;
    border-left-color: #fff;
    border-top-color: #fff;
    animation: loading 1s infinite linear;
}

@keyframes loading {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.v-enter-active,
.v-leave-active {
    transition: all .5s ease-in;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
    transform: scale(0);
}
</style>